﻿(function() {
    "use strict";

    var create = function (id) {
        var wrapper = document.querySelector("#" + id);
        
        if (wrapper.length == 0)
            return;

        var input = $("<input type=\"text\" id=\"colorPicker-" + id + "-input\" class=\"colorPicker-input\" />");
        var button = $("<div id=\"colorPicker-" + id + "-button\" class=\"colorPicker-button\" ></div>");
        button.click(toggle(id));
        var clear = $("<div class=\"colorPicker-clear\"></div>");
        var popup = $("<div id=\"colorPicker-" + id + "-popup\" class=\"colorPicker-popup\"></div>");
        
        var sliderR = $("<input type=\"range\" id=\"colorPicker-" + id + "-sliderR\" class=\"colorPicker-slider\" min=\"0\" max=\"255\" value=\"0\" />");
        var sliderG = $("<input type=\"range\" id=\"colorPicker-" + id + "-sliderG\" class=\"colorPicker-slider\" min=\"0\" max=\"255\" value=\"0\" />");
        var sliderB = $("<input type=\"range\" id=\"colorPicker-" + id + "-sliderB\" class=\"colorPicker-slider\" min=\"0\" max=\"255\" value=\"0\" />");
        

        sliderR.change(change(id));
        sliderG.change(change(id));
        sliderB.change(change(id));

        var colorPreview = $("<div id=\"colorPicker-" + id + "-colorPreview\" class=\"colorPicker-colorPreview\"></div>")

        $(popup).append(sliderR);
        $(popup).append(sliderG);
        $(popup).append(sliderB);

        $(popup).append(colorPreview);

        $(wrapper).append(input);
        $(wrapper).append(button);
        $(wrapper).append(clear);
        $(wrapper).append(popup);
    }

    var toggle = function (id) {
        return function() {
            var popup = document.querySelector("#colorPicker-" + id + "-popup");
            if (popup.style.display == "none"){
                popup.style.display = "block";
                WinJS.UI.Animation.fadeIn(popup);
            }
            else {
                WinJS.UI.Animation.fadeOut(popup);
                popup.style.display = "none";
            }
        };
    }
    
    var change = function(id) {
        return function() {
            var colorPreview = document.querySelector("#colorPicker-" + id + "-colorPreview");
            
            var sliderR = document.querySelector("#colorPicker-" + id + "-sliderR");
            var sliderG = document.querySelector("#colorPicker-" + id + "-sliderG");
            var sliderB = document.querySelector("#colorPicker-" + id + "-sliderB");

            console.log(sliderR.value + " = " + decimalToHex(sliderR.value));

            colorPreview.style.backgroundColor = "#" + decimalToHex(sliderR.value) + decimalToHex(sliderG.value) + decimalToHex(sliderB.value);
        };
    }
    
    var decimalToHex = function(d) {
        var hex = Number(d).toString(16);
        hex = "000000".substr(0, 6 - hex.length) + hex;
        return hex.substr(4, 6);
    }

    
    var publicMembres = {
        create: WinJS.Utilities.markSupportedForProcessing(create)
    };

    WinJS.Namespace.define("ColorPicker", publicMembres);

})();